<template>
  <div class="recommend-day">
    <div class="recommend">
      <el-icon size="100px"><Calendar /></el-icon>
      <section>
        <h2>每日歌曲推荐</h2>
        <p>根据你的音乐口味生成,每天6:00更新</p>
      </section>
    </div>
    <div class="button">
      <el-button type="danger" round class="el-button1">
        <el-icon size="22px"><VideoPlay /></el-icon>
        播放全部
      </el-button>
      <el-button round>
        <el-icon size="19px"><FolderAdd /></el-icon>
        收藏全部
      </el-button>
    </div>
    <el-table :data="computedTableData"  stripe style="width: 100%" height="300px"> 
      <el-table-column type="index"  width="60" />
      <el-table-column   width="80" >
          <el-icon size="18px"><Star /></el-icon>
          <el-icon size="18px"><Download /></el-icon>
      </el-table-column>
      <el-table-column prop="name" label="音乐标题" width="220" ></el-table-column>
      <el-table-column label="歌手" width="180" >
        <template #default="{row}">
          <p>{{ row.ar[0].name }}</p>
        </template>
      </el-table-column>
      <el-table-column label="专辑" width="280" >
        <template #default="{ row }">
          <span>{{ row.al.name }}</span>
          <span class="alia">{{ row.al.tns[0]}}  {{ row.alia[0] }}</span> 
        </template>
      </el-table-column>      
      <el-table-column  label="时长" >
        <template   #default="{ row }">
          <span>{{ timestampToTime(row.dt).slice(14, 19) }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="播放" >
        <template   #default="{ row }">
          <el-button type="danger" link @click="songPlay(row)" >
            <el-icon style="font-size: 20px;"><CirclePlusFilled /></el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <section>
      <el-pagination background layout="prev, pager, next" :total="tableData.length" :page-size="pageSize"
                  v-model:current-page="currentPage"  />
    </section>
  </div>
</template>

<script>
import { getDaySongsInterFace } from '@/api/user'
import { songUrlInterface, songDetailsInterface,lyricsInterface, } from '@/api/artist'
import { timestampToTime } from '../../utils/date'
import { VideoPlay, FolderAdd, Calendar,Star, Download, CirclePlusFilled } from '@element-plus/icons-vue'
import {mapMutations,mapState} from 'vuex'
export default {
  components: {
    VideoPlay,
    FolderAdd,
    Calendar,
    Star,
    Download,
    CirclePlusFilled
  },
  created() {
    this.getDaySongs(),
    this.timestampToTime = timestampToTime
  },
  data() {
    return {
      tableData: [],
      timestampToTime: '',
      // 每页存放10条
      pageSize: 5,
      currentPage:1,
    }
  },
  computed: {
    ...mapState('playListModule', ['playSongId', 'songInfo', 'playStatus', 'songDetails', 'audioInfo', 'lyric']),
      computedTableData() {
        return this.tableData.slice((this.currentPage - 1) * this.pageSize, (this.currentPage - 1) * this.pageSize + this.pageSize)
      }
  },
  methods: {
    ...mapMutations('playListModule', ['SET_PLAY_SONG_ID', 'SET_SONG_INFO', 'SET_PLAY_STATUS','SET_PLAY_DETAILS','SET_AUDIO_INFO','SET_LYRIC']),

   async getSongInfo(id) {
    await  songDetailsInterface({ids:id}).then(res=>this.SET_SONG_INFO(res.songs[0]))
      songUrlInterface({ id: this.playSongId, level: 'standard' }).then(async (res) => {
        await lyricsInterface({ id }).then(res => {
          // console.log(res)
          this.SET_LYRIC(res.lrc.lyric)
          this.audioInfo.lrc= res.lrc.lyric
        }).finally(() => {
          // console.log('h')
          this.SET_AUDIO_INFO({
            id,
            name: this.songInfo.name || '',
            //  作者名
            artist: this.songInfo.ar?.[0].name || '',
            // 音乐地址
            url: res?.data?.[0].url,
            // 音乐封面
            cover: this.songInfo.al.picUrl || '',
            // 歌词
            lrc: this.lyric || ''
            
          })
        })
      })
    },
    
    // 播放每日推荐歌曲
    songPlay(row) { 
      this.SET_PLAY_SONG_ID(row.id);
      // console.log(row.id)
      this.SET_SONG_INFO(row);
      this.SET_PLAY_STATUS(true);
      this.getSongInfo(this.playSongId)
    },
    //  获得每日推荐歌曲
    getDaySongs() { 
      getDaySongsInterFace().then(res => {
        // console.log('res', res)
        this.tableData = res.data.dailySongs
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.recommend{
  display: flex;
  .el-icon{
    color: #EC4141;
    margin-right: 30px;
  }
  section{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    p{
      font-size: 14px;
      color: #747373;
      margin-top: 10px;
    }
  }
}
.el-button1{
  background: #EC4141;
}
.el-button{
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
  line-height: 32px;
  .el-icon{
      margin-right: 8px;
    }

}
.alia{
  color: #ccc;
  margin-left: 5px;
}
.el-table_1_column_2  i.el-icon{
  margin-right: 10px;
  color:#ccc
}
.el-table_1_column_2 i.el-icon:hover{
  color:#999
}
.el-pagination{
  width:fit-content;
  margin:10px  auto;
}
</style>
